<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="/static/common/css/reset.css">
    <link rel="stylesheet" href="/static/common/css/swiper_2.7.css">
    <link rel="stylesheet" href="/static/common/css/footer.css">
    <link rel="stylesheet" href="/static/css/user/detail_user-shopping.css">
    <link rel="stylesheet" href="/static/common/css/common.css">

</head>

<body>
    <!-- 头部部分 -->
    <div class="user-header">
        <div class="user-header-content">
            <div class="user-logo">
                <img src="../static/images/header/logo.png" alt="">
            </div>
            <div class="go-index">
                <a href="index.html">返回首页</a>
            </div>
        </div>
    </div>
    <!-- 内容区域 -->
    <div class="user-main">
        <div class="main-content">
            <div class="main-left">
                <!-- 左侧人物公用部分 -->
                <div class="right-rw">
                    <div class="rw-img">
                        <img id="pic" class="userinfo" src="../static/images/details_img/rw_img1.png" alt="">
                        <img class="userinfo-icon" src="../static/images/user_setup/xj_img.png" alt="">
                        <input id="upload" name="file" accept="image/*" type="file" style="display: none">
                    </div>
                    <h2>Bill Gates</h2>
                    <p class="cj-p">初级学员</p>
                    <ul class="gz-list">
                        <li> <span>325</span> 关注</li>
                        <li> <span>35</span> 好友</li>
                        <li> <span>25</span> 动态</li>
                    </ul>
                    <p class="qd">签到</p>
                </div>

                <ul class="dh-list">
                    <li> <a href="page_user-homepage.html">我的主页</a></li>
                    <li> <a href="page_user-setup.html"> 账户设置</a></li>
                    <li> <a class="dh-acitve" href="list_user-Shopping.html"> 积分商城 </a></li>
                    <li> <a href="page_user-study1.html">学习中心 </a></li>
                    <li> <a href="page_user-feedback.html"> 回访反馈 </a></li>
                </ul>
            </div>
            <div class="main-right">
                <div class="right-user-box">
                    <h1>积分商城</h1>


                </div>
                <!-- 右侧的内容 -->
                <div class="box-txt">
                    <ul class="lists-one1">
                        <li class="list-left1"><img src="../static/images/user_studys/detail_img.png" alt=""></li>
                        <li class="list-left2">
                            <h3>手机充值卡价值100元</h3>
                            <div>
                                <img src="../static/images/user_studys/jf_icon.png" alt="">
                                <span>200</span>
                            </div>
                            <p class="bottom-p">图片仅供参考，实际兑换礼品请以实物或您获取的服务为准</p>
                        </li>
                        <li class="list-left3">
                            <button>兑换</button>
                        </li>
                    </ul>

                        <ul class="js-box-list">
                            <li>
                                <h1>产品介绍</h1>
                                <p>
                                    一、产品介绍<br>
                                    本产品为卡券类产品，您须持卡密自行为联通自有账户（手机、固话、宽带）进行充值。
                                </p>
                                <p>
                                    二、使用流程 <br>
                                    1、获取卡密：兑换成功后，充值卡卡密会以短信的形式下发至手机；如兑换后没有收到卡密，短信可能被手机软件拦截,请查看短信垃圾箱;或者进入“积分商城-我的订单”,点击“获取券码”,即可重新发送卡密；<br>
                                    2、进行充值：<br>
                                    1）拨打热线电话10011，根据语音提示输入卡密完成充值；<br>
                                    2）登录联通网上营业厅，点击“交费-充值卡”输入卡密进行充值；<br>
                                    3）登录联通手机营业厅，点击“服务-交费-充值卡”输入卡密进行充值。
                                </p>
                                <p>
                                    三、客户须知 <br>
                                    本产品成功兑换后不退不换，不提供发票，为了保障您的权益，请您仔细核对后下单支付，非常感谢！
                                </p>
                            </li>
                            <li>
                                <h1>温馨提示</h1>
                                <p>1、充值卡只可为联通自有账户（手机、固话、宽带）进行充值。<br>
                                    2、兑换成功后系统会将充值卡卡密通过短信的方式发送到用户手中。<br>
                                    3、充值卡兑换一经兑出将不予退换。</p>
                            </li>

                        </ul>
             

                </div>


            </div>

        </div>


    </div>

    <!--放一个id为footer的div,把footer.html加载到这块-->
    <footer>
        <div class="footers">
            <div class="box-footer">
                <div class="box-main-footer">
                    <div class="left-txt">
                        <p>累加访问量:<span>19,502,812</span>次</p>
                        <p><img src="../static//images/footer/icon1.png" alt=""> <span>95531 / 400 8888 588</span></p>
                        <p><img src="../static//images/footer/icon2.png" alt=""> <span>service@longone.com</span></p>
                        <p><img src="../static//images/footer/icon3.png" alt=""> <span>021-50588876</span></p>
                    </div>
                    <div class="right-txt">
                        <span>关注我们</span>
                        <img src="../static//images/footer/wx.png" alt="">
                    </div>
                </div>
                <div class="box-bottom">
                    <div class="box-bottom-content">
                        <p class="left-p">版权声明 中国证监会投资者保护热线：12386</p>
                        <p class="right-p">网站备案号 Copyright @ 2014 DONGHAI SECURITIES All Rights Reserved.
                            苏ICP备13006468号-1
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </footer>

    <!-- 底部部分 -->
</body>
<script src="/static/common/js/jquery-1.11.3.js"></script>
<script src="/static/common/js/ellipsis.js"></script>
<!-- 加载头尾 -->



<script>
    // 点击关注和取消关注
    $('.qd').click(function () {

        if ($(this)[0].innerText == '签到') {
            $(this)[0].innerText = '签到成功'
            $(this).addClass('qd-active')
        } else {
            $(this)[0].innerText = '签到'
            $(this).removeClass('qd-active')
        }

    })

    // 添加class类名
    $('.fk_tabs>li').click(function () {
        $(this).addClass('user-active-list').siblings().removeClass('user-active-list')

        $('.list-img').eq($(this).index()).show().siblings().hide()
    })



    // 上传头像功能
    //     使用ajax上传到服务器并实现预览

    // 需要注意几点: 

    // fd.append('name', file);
    // 这一句中的name是后台需要接受的file的name
    // 这是公共左侧栏目的上传头像
    $(function () {
        $("#pic").click(function () {
            $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#upload").on("change", function () {
                var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                    upimg();
                }
            });
        });
    });

    //建立一?可存取到?file的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    //上传头像到服务器
    function upimg() {
        var pic = $('#upload')[0].files[0];
        var file = new FormData();
        file.append('image', pic);
        $.ajax({
            url: "/uploadImg",
            type: "post",
            data: file,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
                var res = data;
                $("#resimg").append("<img src='/" + res + "'>")
            }
        });
    }


    // 点击搜索跳转
    $('.serch-go').click(function () {
        window.location.href = 'list_search.html'
    })

    $('.tabs-study>li').click(function () {
        $(this).addClass('jf-active').siblings().removeClass('jf-active')
    })
</script>

</html>